<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交平台 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4267B2;
            --primary-light: #E9EBF5;
            --secondary: #1DA1F2;
            --success: #28a745;
            --danger: #dc3545;
            --warning: #ffc107;
            --dark: #2D3436;
            --light: #F8F9FA;
            --gray: #636E72;
            --border: #DFE6E9;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
            --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F5F7FA;
            color: var(--dark);
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 0.75rem 1rem;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.5rem;
        }
        
        .search-bar {
            flex: 1;
            max-width: 600px;
            position: relative;
            margin: 0 1rem;
        }
        
        .search-input {
            width: 100%;
            padding: 0.6rem 1rem 0.6rem 2.5rem;
            border-radius: 20px;
            border: 1px solid var(--border);
            background-color: var(--light);
            transition: all 0.2s;
        }
        
        .search-input:focus {
            outline: none;
            background-color: white;
            box-shadow: 0 0 0 2px var(--primary-light);
            border-color: var(--primary);
        }
        
        .search-icon {
            position: absolute;
            left: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .nav-link {
            color: var(--dark);
            margin-left: 0.5rem;
            margin-right: 0.5rem;
            font-weight: 500;
            transition: color 0.2s;
            padding: 0.5rem 0.75rem !important;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        /* 主内容区 */
        .main-container {
            padding: 2rem 0;
        }
        
        /* 左侧导航 */
        .sidebar-left {
            position: sticky;
            top: 80px;
            height: calc(100vh - 80px);
            overflow-y: auto;
            padding-right: 1rem;
        }
        
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar-menu li {
            margin-bottom: 0.25rem;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            color: var(--dark);
            text-decoration: none;
            transition: all 0.2s;
            font-weight: 500;
        }
        
        .sidebar-menu a:hover, .sidebar-menu a.active {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .sidebar-menu a i {
            font-size: 1.25rem;
            margin-right: 0.75rem;
            width: 24px;
            text-align: center;
        }
        
        .profile-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 1.5rem;
        }
        
        .profile-header {
            height: 80px;
            background-color: var(--primary-light);
        }
        
        .profile-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 3px solid white;
            margin-top: -35px;
            margin-left: 1rem;
            object-fit: cover;
        }
        
        .profile-info {
            padding: 0.5rem 1rem 1rem;
        }
        
        .profile-name {
            font-weight: 600;
            margin-bottom: 0;
        }
        
        .profile-handle {
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 0.75rem;
        }
        
        .profile-stats {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
        }
        
        .profile-stat {
            text-align: center;
        }
        
        .profile-stat-value {
            font-weight: 600;
            color: var(--primary);
        }
        
        .profile-stat-label {
            color: var(--gray);
        }
        
        /* 中间内容区 */
        .content-feed {
            padding: 0 1rem;
        }
        
        .create-post {
            background-color: white;
            border-radius: 12px;
            padding: 1rem;
            box-shadow: var(--shadow);
            margin-bottom: 1.5rem;
        }
        
        .post-input-container {
            display: flex;
            margin-bottom: 1rem;
        }
        
        .post-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 0.75rem;
        }
        
        .post-input {
            flex: 1;
            padding: 0.75rem 1rem;
            border-radius: 20px;
            border: 1px solid var(--border);
            background-color: var(--light);
            transition: all 0.2s;
        }
        
        .post-input:focus {
            outline: none;
            background-color: white;
            box-shadow: 0 0 0 2px var(--primary-light);
            border-color: var(--primary);
        }
        
        .post-actions {
            display: flex;
            justify-content: space-around;
        }
        
        .post-action {
            display: flex;
            align-items: center;
            color: var(--gray);
            background: none;
            border: none;
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .post-action:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .post-action i {
            margin-right: 0.5rem;
            font-size: 1.1rem;
        }
        
        .post-action.image {
            color: var(--success);
        }
        
        .post-action.video {
            color: var(--danger);
        }
        
        .post-action.event {
            color: var(--warning);
        }
        
        /* 内容卡片样式 */
        .content-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-bottom: 1.5rem;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .content-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }
        
        .card-content {
            padding: 1.25rem;
        }
        
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 0.75rem;
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 0;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }
        
        .card-text {
            color: var(--dark);
            font-size: 0.95rem;
            margin-bottom: 1rem;
        }
        
        .card-image {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
        
        .card-actions {
            display: flex;
            justify-content: space-between;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border);
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .action-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .action-item:hover {
            color: var(--primary);
        }
        
        .action-item i {
            margin-right: 0.35rem;
        }
        
        .action-item.like:hover {
            color: var(--danger);
        }
        
        .action-item.comment:hover {
            color: var(--success);
        }
        
        .action-item.share:hover {
            color: var(--secondary);
        }
        
        /* 右侧互动信息栏 */
        .sidebar-right {
            position: sticky;
            top: 80px;
            height: calc(100vh - 80px);
            overflow-y: auto;
            padding-left: 1rem;
        }
        
        .sidebar-widget {
            background-color: white;
            border-radius: 12px;
            box-shadow: var(--shadow);
            margin-bottom: 1.5rem;
            overflow: hidden;
        }
        
        .widget-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border);
        }
        
        .widget-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
            color: var(--dark);
        }
        
        .widget-content {
            padding: 0;
        }
        
        /* 推荐关注 */
        .suggestion-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 1.25rem;
            transition: background-color 0.2s;
        }
        
        .suggestion-item:hover {
            background-color: var(--light);
        }
        
        .suggestion-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 1rem;
        }
        
        .suggestion-info {
            flex: 1;
        }
        
        .suggestion-name {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 0;
        }
        
        .suggestion-meta {
            color: var(--gray);
            font-size: 0.8rem;
        }
        
        .follow-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.35rem 0.75rem;
            font-weight: 500;
            font-size: 0.85rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .follow-btn:hover {
            background-color: #365899;
        }
        
        .follow-btn.following {
            background-color: transparent;
            color: var(--dark);
            border: 1px solid var(--border);
        }
        
        .follow-btn.following:hover {
            background-color: var(--light);
            color: var(--danger);
            border-color: var(--danger);
        }
        
        /* 热门话题 */
        .trending-item {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .trending-item:last-child {
            border-bottom: none;
        }
        
        .trending-item:hover {
            background-color: var(--light);
        }
        
        .trending-category {
            color: var(--gray);
            font-size: 0.8rem;
            margin-bottom: 0.25rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .trending-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
            line-height: 1.3;
        }
        
        .trending-stats {
            color: var(--gray);
            font-size: 0.8rem;
        }
        
        /* 最近活动 */
        .activity-item {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border);
            transition: background-color 0.2s;
        }
        
        .activity-item:last-child {
            border-bottom: none;
        }
        
        .activity-item:hover {
            background-color: var(--light);
        }
        
        .activity-content {
            display: flex;
        }
        
        .activity-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.75rem;
            flex-shrink: 0;
        }
        
        .activity-icon.like {
            background-color: rgba(220, 53, 69, 0.1);
            color: var(--danger);
        }
        
        .activity-icon.comment {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success);
        }
        
        .activity-icon.follow {
            background-color: rgba(26, 145, 218, 0.1);
            color: var(--secondary);
        }
        
        .activity-text {
            flex: 1;
            font-size: 0.9rem;
        }
        
        .activity-text strong {
            font-weight: 600;
        }
        
        .activity-time {
            color: var(--gray);
            font-size: 0.8rem;
            margin-top: 0.25rem;
        }
        
        /* 通知预览 */
        .notification-item {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border);
            transition: background-color 0.2s;
        }
        
        .notification-item:last-child {
            border-bottom: none;
        }
        
        .notification-item.unread {
            background-color: rgba(66, 103, 178, 0.05);
        }
        
        .notification-item:hover {
            background-color: var(--light);
        }
        
        .notification-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.25rem;
        }
        
        .notification-sender {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .notification-time {
            color: var(--gray);
            font-size: 0.8rem;
        }
        
        .notification-content {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        
        .notification-preview {
            background-color: var(--light);
            border-radius: 6px;
            padding: 0.75rem;
            font-size: 0.85rem;
            border: 1px solid var(--border);
        }
        
        .notification-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }
        
        .notification-btn {
            font-size: 0.85rem;
            padding: 0.25rem 0.75rem;
        }
        
        /* 查看更多链接 */
        .view-more {
            display: block;
            padding: 1rem 1.25rem;
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            text-align: center;
            transition: background-color 0.2s;
        }
        
        .view-more:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .sidebar-left .menu-text {
                display: none;
            }
            
            .sidebar-left .sidebar-menu a {
                justify-content: center;
                padding: 0.75rem;
            }
            
            .sidebar-left .sidebar-menu a i {
                margin-right: 0;
            }
            
            .profile-card {
                display: none;
            }
        }
        
        @media (max-width: 992px) {
            .sidebar-right {
                display: none;
            }
            
            .search-bar {
                max-width: 300px;
            }
        }
        
        @media (max-width: 768px) {
            .search-bar {
                display: none;
            }
            
            .sidebar-left {
                display: none;
            }
            
            .post-actions {
                flex-wrap: wrap;
            }
            
            .post-action {
                flex: 1;
                justify-content: center;
                padding: 0.5rem;
            }
            
            .post-action span {
                display: none;
            }
            
            .post-action i {
                margin-right: 0;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">社交平台</a>
            
            <div class="search-bar d-none d-md-block">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="搜索内容、用户或话题...">
            </div>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-bell me-1"></i> 通知</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-envelope me-1"></i> 消息</a>
                    </li>
                </ul>
                
                <ul class="navbar-nav ms-3">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="rounded-circle" style="width: 36px; height: 36px; object-fit: cover;">
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i> 个人中心</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-bookmark me-2"></i> 我的收藏</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i> 设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i> 退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container main-container">
        <div class="row">
            <!-- 左侧导航栏 -->
            <div class="col-lg-2 d-none d-lg-block sidebar-left">
                <ul class="sidebar-menu">
                    <li><a href="#" class="active"><i class="fas fa-home"></i> <span class="menu-text">首页</span></a></li>
                    <li><a href="#"><i class="fas fa-compass"></i> <span class="menu-text">发现</span></a></li>
                    <li><a href="#"><i class="fas fa-bell"></i> <span class="menu-text">通知</span></a></li>
                    <li><a href="#"><i class="fas fa-envelope"></i> <span class="menu-text">消息</span></a></li>
                    <li><a href="#"><i class="fas fa-bookmark"></i> <span class="menu-text">收藏</span></a></li>
                    <li><a href="#"><i class="fas fa-list"></i> <span class="menu-text">列表</span></a></li>
                    <li><a href="#"><i class="fas fa-user"></i> <span class="menu-text">个人资料</span></a></li>
                    <li><a href="#"><i class="fas fa-cog"></i> <span class="menu-text">设置</span></a></li>
                </ul>
                
                <div class="profile-card">
                    <div class="profile-header"></div>
                    <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="profile-avatar">
                    <div class="profile-info">
                        <h4 class="profile-name">张小明</h4>
                        <p class="profile-handle">@zhangxiaoming</p>
                        <div class="profile-stats">
                            <div class="profile-stat">
                                <div class="profile-stat-value">248</div>
                                <div class="profile-stat-label">帖子</div>
                            </div>
                            <div class="profile-stat">
                                <div class="profile-stat-value">1.2k</div>
                                <div class="profile-stat-label">关注</div>
                            </div>
                            <div class="profile-stat">
                                <div class="profile-stat-value">3.5k</div>
                                <div class="profile-stat-label">粉丝</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 中间内容区 -->
            <div class="col-lg-6 content-feed">
                <!-- 发布帖子框 -->
                <div class="create-post">
                    <div class="post-input-container">
                        <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="post-avatar">
                        <input type="text" class="post-input" placeholder="分享你的想法...">
                    </div>
                    <div class="post-actions">
                        <button class="post-action image">
                            <i class="fas fa-image"></i>
                            <span>图片</span>
                        </button>
                        <button class="post-action video">
                            <i class="fas fa-video"></i>
                            <span>视频</span>
                        </button>
                        <button class="post-action event">
                            <i class="fas fa-calendar"></i>
                            <span>活动</span>
                        </button>
                        <button class="post-action">
                            <i class="fas fa-smile"></i>
                            <span>心情</span>
                        </button>
                    </div>
                </div>
                
                <!-- 内容卡片 1 -->
                <div class="content-card">
                    <div class="card-content">
                        <div class="card-header">
                            <img src="https://picsum.photos/100/100?random=101" alt="用户头像" class="user-avatar">
                            <div class="user-info">
                                <p class="user-name">旅行爱好者</p>
                                <p class="post-time">2小时前</p>
                            </div>
                        </div>
                        
                        <p class="card-text">分享一组令人惊叹的山川美景，大自然的鬼斧神工！这是我在最近的旅行中拍摄的照片，站在山顶俯瞰云海的那一刻，感觉所有的烦恼都烟消云散了...</p>
                        <img src="https://picsum.photos/800/600?random=10" alt="风景照片" class="card-image">
                        
                        <div class="card-actions">
                            <div class="action-item like">
                                <i class="far fa-heart"></i> 248
                            </div>
                            <div class="action-item comment">
                                <i class="far fa-comment"></i> 36
                            </div>
                            <div class="action-item share">
                                <i class="far fa-share-square"></i> 12
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 内容卡片 2 -->
                <div class="content-card">
                    <div class="card-content">
                        <div class="card-header">
                            <img src="https://picsum.photos/100/100?random=102" alt="用户头像" class="user-avatar">
                            <div class="user-info">
                                <p class="user-name">美食家小李</p>
                                <p class="post-time">5小时前</p>
                            </div>
                        </div>
                        
                        <p class="card-text">周末在家尝试做的意大利面，味道竟然出乎意料的好！分享一下我的独家配方，简单易学，在家也能做出餐厅级别的意大利面，赶紧学起来吧...</p>
                        <img src="https://picsum.photos/800/600?random=11" alt="美食照片" class="card-image">
                        
                        <div class="card-actions">
                            <div class="action-item like">
                                <i class="far fa-heart"></i> 186
                            </div>
                            <div class="action-item comment">
                                <i class="far fa-comment"></i> 42
                            </div>
                            <div class="action-item share">
                                <i class="far fa-share-square"></i> 8
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 内容卡片 3 -->
                <div class="content-card">
                    <div class="card-content">
                        <div class="card-header">
                            <img src="https://picsum.photos/100/100?random=103" alt="用户头像" class="user-avatar">
                            <div class="user-info">
                                <p class="user-name">科技测评师</p>
                                <p class="post-time">昨天</p>
                            </div>
                        </div>
                        
                        <p class="card-text">最新款智能手机深度测评，这些功能让我惊艳！经过一周的深度使用，我对这款新手机有了全面了解，从性能到拍照，从续航到系统，全方位解析...</p>
                        <img src="https://picsum.photos/800/600?random=12" alt="科技产品照片" class="card-image">
                        
                        <div class="card-actions">
                            <div class="action-item like">
                                <i class="far fa-heart"></i> 529
                            </div>
                            <div class="action-item comment">
                                <i class="far fa-comment"></i> 134
                            </div>
                            <div class="action-item share">
                                <i class="far fa-share-square"></i> 76
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧互动信息栏 -->
            <div class="col-lg-4 d-none d-lg-block sidebar-right">
                <!-- 推荐关注 -->
                <div class="sidebar-widget">
                    <div class="widget-header">
                        <h3 class="widget-title">推荐关注</h3>
                    </div>
                    <div class="widget-content">
                        <div class="suggestion-item">
                            <img src="https://picsum.photos/100/100?random=201" alt="用户头像" class="suggestion-avatar">
                            <div class="suggestion-info">
                                <p class="suggestion-name">摄影爱好者</p>
                                <p class="suggestion-meta">分享精彩瞬间 · 128位共同好友</p>
                            </div>
                            <button class="follow-btn">关注</button>
                        </div>
                        <div class="suggestion-item">
                            <img src="https://picsum.photos/100/100?random=202" alt="用户头像" class="suggestion-avatar">
                            <div class="suggestion-info">
                                <p class="suggestion-name">健身教练王</p>
                                <p class="suggestion-meta">健身达人 · 你关注的5人也关注了他</p>
                            </div>
                            <button class="follow-btn">关注</button>
                        </div>
                        <div class="suggestion-item">
                            <img src="https://picsum.photos/100/100?random=203" alt="用户头像" class="suggestion-avatar">
                            <div class="suggestion-info">
                                <p class="suggestion-name">音乐发烧友</p>
                                <p class="suggestion-meta">独立音乐人 · 推荐给你</p>
                            </div>
                            <button class="follow-btn">关注</button>
                        </div>
                        <div class="suggestion-item">
                            <img src="https://picsum.photos/100/100?random=204" alt="用户头像" class="suggestion-avatar">
                            <div class="suggestion-info">
                                <p class="suggestion-name">电影评论家</p>
                                <p class="suggestion-meta">影评人 · 经常分享你感兴趣的内容</p>
                            </div>
                            <button class="follow-btn following">已关注</button>
                        </div>
                    </div>
                    <a href="#" class="view-more">查看更多</a>
                </div>
                
                <!-- 热门话题 -->
                <div class="sidebar-widget">
                    <div class="widget-header">
                        <h3 class="widget-title">热门话题</h3>
                    </div>
                    <div class="widget-content">
                        <div class="trending-item">
                            <p class="trending-category">科技</p>
                            <p class="trending-title">新一代人工智能技术将如何改变我们的生活</p>
                            <p class="trending-stats">3.2k 条讨论 · 今天</p>
                        </div>
                        <div class="trending-item">
                            <p class="trending-category">体育</p>
                            <p class="trending-title">全国篮球锦标赛四强诞生，半决赛即将打响</p>
                            <p class="trending-stats">5.7k 条讨论 · 2小时前</p>
                        </div>
                        <div class="trending-item">
                            <p class="trending-category">娱乐</p>
                            <p class="trending-title">年度电影节获奖名单揭晓，国产影片斩获多项大奖</p>
                            <p class="trending-stats">8.9k 条讨论 · 昨天</p>
                        </div>
                        <div class="trending-item">
                            <p class="trending-category">健康</p>
                            <p class="trending-title">专家分享：如何在工作中保持良好的坐姿和健康习惯</p>
                            <p class="trending-stats">1.5k 条讨论 · 3天前</p>
                        </div>
                    </div>
                    <a href="#" class="view-more">发现更多话题</a>
                </div>
                
                <!-- 最近活动 -->
                <div class="sidebar-widget">
                    <div class="widget-header">
                        <h3 class="widget-title">最近活动</h3>
                    </div>
                    <div class="widget-content">
                        <div class="activity-item">
                            <div class="activity-content">
                                <div class="activity-icon like">
                                    <i class="fas fa-heart"></i>
                                </div>
                                <div>
                                    <p class="activity-text"><strong>李小华</strong> 和 <strong>3 位好友</strong> 赞了你的帖子</p>
                                    <p class="activity-time">1小时前</p>
                                </div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-content">
                                <div class="activity-icon comment">
                                    <i class="fas fa-comment"></i>
                                </div>
                                <div>
                                    <p class="activity-text"><strong>王大力</strong> 评论了你的照片："这地方太美了，求地址！"</p>
                                    <p class="activity-time">3小时前</p>
                                </div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-content">
                                <div class="activity-icon follow">
                                    <i class="fas fa-user-plus"></i>
                                </div>
                                <div>
                                    <p class="activity-text"><strong>张雨晴</strong>、<strong>刘建国</strong> 等 <strong>5 人</strong> 关注了你</p>
                                    <p class="activity-time">昨天</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="view-more">查看所有活动</a>
                </div>
                
                <!-- 通知预览 -->
                <div class="sidebar-widget">
                    <div class="widget-header">
                        <h3 class="widget-title">通知</h3>
                    </div>
                    <div class="widget-content">
                        <div class="notification-item unread">
                            <div class="notification-header">
                                <div class="notification-sender">系统通知</div>
                                <div class="notification-time">10分钟前</div>
                            </div>
                            <div class="notification-content">你的帖子获得了精选推荐</div>
                            <div class="notification-preview">
                                分享一组令人惊叹的山川美景，大自然的鬼斧神工！
                            </div>
                        </div>
                        <div class="notification-item unread">
                            <div class="notification-header">
                                <div class="notification-sender">摄影爱好者</div>
                                <div class="notification-time">1小时前</div>
                            </div>
                            <div class="notification-content">邀请你参加摄影交流活动</div>
                            <div class="notification-actions">
                                <button class="btn btn-sm btn-primary notification-btn">接受</button>
                                <button class="btn btn-sm btn-outline notification-btn">拒绝</button>
                            </div>
                        </div>
                        <div class="notification-item">
                            <div class="notification-header">
                                <div class="notification-sender">系统通知</div>
                                <div class="notification-time">昨天</div>
                            </div>
                            <div class="notification-content">你的账号已完成实名认证</div>
                        </div>
                    </div>
                    <a href="#" class="view-more">查看所有通知</a>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞功能
            const likeButtons = document.querySelectorAll('.action-item.like');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countText = this.textContent.trim();
                    let count = parseInt(countText.split(' ')[1]);
                    
                    if (icon.classList.contains('far')) {
                        // 未点赞状态，点击后变为已点赞
                        icon.classList.remove('far');
                        icon.classList.add('fas', 'text-danger');
                        this.innerHTML = `<i class="fas fa-heart text-danger"></i> ${count + 1}`;
                    } else {
                        // 已点赞状态，点击后取消点赞
                        icon.classList.remove('fas', 'text-danger');
                        icon.classList.add('far');
                        this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                    }
                });
            });
            
            // 关注按钮功能
            const followButtons = document.querySelectorAll('.follow-btn');
            followButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.classList.contains('following')) {
                        // 已关注状态，点击后取消关注
                        this.classList.remove('following');
                        this.textContent = '关注';
                    } else {
                        // 未关注状态，点击后关注
                        this.classList.add('following');
                        this.textContent = '已关注';
                    }
                });
            });
            
            // 通知标记为已读
            const notificationItems = document.querySelectorAll('.notification-item.unread');
            notificationItems.forEach(item => {
                item.addEventListener('click', function() {
                    this.classList.remove('unread');
                });
            });
        });
    </script>
</body>
</html>
    
